<template>
  <div id="app">
    <div class="chat">
        <van-nav-bar
            title="王律师"
            left-text=""
            right-text="..."
            left-arrow
            @click-left="onClickLeft"
            :border="false"    
    />
    </div>
    <main>
        <!-- <div class="left"></div> -->
        <div id="main" class="main">
      <ul id="content" class="content">
        <li class="msgContent left">hello?</li>
        <div style="clear: both"></div>
        <li class="msgContent left">hello</li>
        <div style="clear: both"></div>
        <li class="msgContent right">hi</li>
        <div style="clear: both"></div>
        <li class="msgContent left">hehe</li>
        <div style="clear: both"></div>
        <li class="msgContent left">goodbye</li>
        <div style="clear: both"></div>
        <li class="msgContent right">。。。。</li>
        <div style="clear: both"></div>
        <li class="msgContent right">
          sdfasdsadfassdfsdfsdfdsfsdfsdfsdfdfasdffasdfasfdasd fasd fasd
          fasdfasdfasdf
        </li>
        <div style="clear: both"></div>

        <li class="msgContent right">aaa</li>
        <div style="clear: both"></div>
      </ul>
      <div class="zy">
      <input type="text" class="msgInput" name="" id="msg_input">
      <button id="sendbtn" class="sendbtn">发送</button>
      </div>
    </div>

    </main>
    
  </div>
</template>

<script>
export default {
     methods:{
      goJie(){
        console.log(this.$router);
      },

      onClickLeft() {
        this.$router.go(-1);
    },
    },
    

}
</script>

<style>
     * {
        padding: 0;
        margin: 0;
    }
    div.van-nav-bar__right {
        align-items: center;
        font-size:0.5rem;
        cursor: pointer;
        
    }

    /*  */
    .main {
        position: relative;
        margin: 0.1rem auto;
        width: 7.5rem;
        height:11.2rem;
      }
      .msgInput {
        display: block;
        width: 6rem;
        height:0.5rem;
        /* margin: 10px auto; */
      }
      .sendbtn {
        /* position: absolute; */
        /* width: 0.5rem; */
        height: 29px;
        bottom: 5px;
        right: 10px;
      }
      .content {
        list-style: none;
        width: 7.5rem;
        height: 11.2rem;
        margin: 5px auto;
        border: 1px dotted #d1d3d6;
        overflow-y: scroll;
        background-color: #f2f2f2;
      }
      .msgContent {
        width: auto;
        max-width: 250px;
        height: auto;
        word-break: break-all;
        margin: 5px;
        padding: 3px;
        border-radius: 5px;
      }

      .content .left {
        float: left;
        text-align: left;
        background-color: #ffff;
      }
      .content .right {
        float: right;
        text-align: right;
        background-color: #0452f6;
      }
      .zy{
        display: flex;
        justify-content: space-around;
      }
</style>